<html>
    
    <head>
        <title>Turbulenz - Getting Started Guide - API Example</title>
        <!-- Script includes go here -->
        <script src="jslib/debug.js"></script>
        <script src="jslib/webgl/turbulenzengine.js"></script>
        <script src="jslib/webgl/graphicsdevice.js"></script>
        <script src="jslib/draw2d.js"></script>
		<script src="jslib/canvas.js"></script>
		<script src="jslib/vmath.js"></script>
<!--
		 <script type="text/javascript">
            TurbulenzEngine = WebGLTurbulenzEngine.create({
                canvas: document.getElementById("canvas")
            });
        </script>
-->
    </head>
    
    <body>
        <canvas id="canvas" width="640px" height="480px" />
        <script>
            /* Game code goes here */

            TurbulenzEngine = WebGLTurbulenzEngine.create({
                canvas: document.getElementById("canvas")
            });

            var graphicsDevice = TurbulenzEngine.createGraphicsDevice({});
			//var canvasElem = TurbulenzEngine.canvas;
		//	var mathDevice = TurbulenzEngine.createMathDevice({});
		//	var canvas = Canvas.create(graphicsDevice,mathDevice);

			//OK: ctx === Turbulenz Canvas Context
			var ctx = canvas.getContext('2d');
            var draw2D = Draw2D.create({
                graphicsDevice: graphicsDevice
            });

            var r = 1.0,
                g = 1.0,
                b = 0.0,
                a = 1.0;
            var bgColor = [r, g, b, a];
            
            var tileHeight = 32;
            var tileWidth = 32;
            var x1 = 0;
            var y1 = 0;
            var x2 = 25;
            var y2 = 25;
            var colorlist = Array([1.0, 1.0, 0.0, 1.0], [1.0, 0.0, 0.0, 1.0]);
             //        var rectangle1 = [x1, y1, x2, y2];
             //        var rectangle2 = [25, y1, 50,y2];
             //        var rectangles = [rectangle1, rectangle2];
            var objectList = new Array();
            var rectangeList = new Array();
            var drawObject;
            var layerList = new Array();

            function getRectangleList() {
                calculateNrTiles();
                var col = 0;
                var pos = 0;
                for (i = 0; i < layerList.length; i++) {
                    for (u = 0; u < layerList[i].length; u++) {
                        drawObject = {
                            color: colorlist[col],
                            destinationRectangle: layerList[i][u]

                        }
                        col++
                        if (col == col.length) {
                            col = 0;
                        }
                        objectList[pos] = drawObject;
                        pos++
                    }

                }

            }


            function calculateNrTiles() {
        
                var widthTiles = Math.floor(graphicsDevice.width / tileHeight);
                var heightTiles = Math.floor(graphicsDevice.height / tileWidth);
                var fx = 0;
                var lx = tileWidth;
                var fy = 0;
                var ly = tileHeight;
                for (var i = 0; i < heightTiles; i++) {
                    for (var u = 0; u < widthTiles; u++) {
                        rectangeList[u] = [fx, fy, lx, ly];
                        fx += tileWidth;
                        lx += tileWidth;
                    }
                    fy += tileHeight;
                    ly += tileHeight;
                    fx = 0;
                    lx = tileWidth;
                    layerList[i] = rectangeList;
                    rectangeList = new Array();
                }
            }
            var sprite = Draw2DSprite.create({
                width: 25,
                height: 25,
                x: 50,
                y: graphicsDevice.height / 2,
                color: [1.0, 1.0, 1.0, 1.0],
                rotation: Math.PI / 4,
                textureRectangle: [64, 0, 128, 64]
            });
             //  sprite.setTextureRectangle([64,0,128,64]);
            var newsprite = graphicsDevice.createTexture({
                src: "img/tile1.png",
                mipmaps: true,
                onload: function(newsprite) {
                    if (newsprite) {
                        sprite.setTexture(newsprite);
                        sprite.setTextureRectangle([0, 0, 64, 64]);

                    }
                }
            });

            var PI2 = Math.PI * 2;
            var rotateAngle = Math.PI / 60;

            var isPlayerMoving = false;
            var check = true;
            var newXmouse = 0;
            var newYmouse = 0;
            var Xmouse = 0;
            var Ymouse = 0;
            var oldXmouse = sprite.x;
            var oldYmouse = sprite.y;

            var mouseSprite = Draw2DSprite.create({
                width: tileWidth,
                height: tileHeight,
                x: Xmouse,
                y: Ymouse,
                color: [1.0, 1.0, 1.0, 1.0],

                textureRectangle: [64, 0, 128, 64]
            });
            
            var backgroundSprite = Draw2DSprite.create({
                width: tileWidth,
                height: tileHeight,
                x: 0,
                y: 0,
                color: [1.0, 1.0, 1.0, 1.0],
                textureRectangle: [0, 0, tileWidth, tileHeight]
            });
            
            var backgroundtexture = graphicsDevice.createTexture({
                src: "img/bg1.jpg",
                mipmaps: true,
                onload: function(texture) {
                    if (texture) {
                        backgroundSprite.setTexture(texture);
                        backgroundSprite.setTextureRectangle([0, 0, tileWidth, tileHeight]);
                    }
                }
            });
            
             //  sprite.setTextureRectangle([64,0,128,64]);
            var mSprite = graphicsDevice.createTexture({
                src: "img/select.png",
                mipmaps: true,
                onload: function(mSprite) {
                    if (mSprite) {
                        mouseSprite.setTexture(mSprite);
                        mouseSprite.setTextureRectangle([0, 0, 32, 32]);
                    }
                }
            });
            canvas.addEventListener("mousemove", mouseCheck, false);

            canvas.addEventListener("mousedown", mouseClick, false);
			
			var WalkPathSprite = Draw2DSprite.create({
                width: 25,
                height: 25,
                x: graphicsDevice.width / 2,
                y: graphicsDevice.height / 2,
                color: [1.0, 1.0, 1.0, 1.0],
                textureRectangle: [64, 0, 128, 64]
            });
          
            var newsprite = graphicsDevice.createTexture({
                src: "img/StepTile.png",
                mipmaps: true,
                onload: function(newsprite) {
                    if (newsprite) {
                        WalkPathSprite.setTexture(newsprite);
                        WalkPathSprite.setTextureRectangle([0, 0, 32, 32]);

                    }
                }
            });
				var DebugSprite = Draw2DSprite.create({
                width: 75,
                height: graphicsDevice.height / 2,
                x: 10,
                y: graphicsDevice.height / 2,
                color: [0.0, 1.0, 1.0, 1.0],
                textureRectangle: [0, 0, 64, 64]
            });
            function mouseCheck(e) {

				mouseSprite.x = e.pageX;//- this.offsetLeft;
              	mouseSprite.y = e.pageY;//- this.offsettop;
                Xmouse = rightPos(e.pageX);
                Ymouse = rightPos(e.pageY);

            }

            function rightPos(pos) {
                var ModPost = pos % tileHeight;
                var check = tileHeight/2;
                var newPos = pos;
                if (ModPost <= check) {
                    newPos -= ModPost;
                    return newPos;
                }
                if (ModPost > check) {
                    for (i = ModPost; ModPost != tileHeight; ModPost++) {
                        newPos++
                    }
                    return newPos;
                }
                return newPos;
            }
            var checkvalue = false;
			var mxPlus = 0;
			var myPlus = 0;
			var endValue = 10;
			var checkNumber = 0;
            function newDirection(newPos, oldPos) {

                if (newPos > oldPos) {
                    return oldPos +=1;
                }
                if (newPos < oldPos) {
                    return oldPos -=1;
				}
				return oldPos;
            }
			function straightDirection(newxPos,newyPos){
				
//				var xDif = Math.abs(newXmouse - sprite.x);
//				var yDif = Math.abs(newYmouse - sprite.y);
				var angle = Math.atan(Math.abs(newyPos/newxPos));
//				if(xDif > yDif){
//				mxPlus = 1;//newDirection(newXmouse,sprite.x,1);
//				myPlus = Math.round((xDif/yDif)*10) / 10; //newDirection(newXmouse,sprite.y, (xDif/yDif));
//					endValue = xDif;
//				}
//				if(xDif < yDif){
//				mxPlus = Math.round((yDif/xDif)*10) / 10;//newDirection(newXmouse,sprite.x,(yDif/xDif));
//				myPlus = 1;//newDirection(newXmouse,sprite.y, 1);
//				endValue = yDif;	
//				}
				var vB = 1 //Speed of bullet
				mxPlus = vB*Math.cos(angle) //Speed of bullet on x-axis
				if (newxPos<0) mxPlus*=-1; //Makes it the same direction
				myPlus = vB*Math.sin(angle) //Speed of bullet on y-axis
				if (newyPos<0) myPlus*=-1; //Makes it the same direction
				
					
			}
            function mouseClick(e) {

                newXmouse = e.pageX;
                newYmouse = e.pageY;
				// straightDirection();
                isPlayerMoving = true;
            }

            function init() {
                getRectangleList();


            }
            window.onload = init();
			var scale = [1, 0];
			var randomNumber = 0;
			
            function update() {
				

				
				if (scale[1] < 1){scale[1] +=0.02;}
                /* Update code goes here */
                //  b += 0.01;
                // bgColor[2] = b % 1; // Clamp color between 0-1
               // sprite.rotation += rotateAngle;
                //sprite.rotation %= PI2; //Wrap rotation at PI * 2
                if (isPlayerMoving) {
                   straightDirection(newXmouse, newYmouse);
					sprite.x += mxPlus;
                    sprite.y += myPlus;
					randomNumber++;
                  // if (newXmouse == sprite.x && newYmouse == sprite.y) {
                   if( randomNumber == endValue){
					isPlayerMoving = false;
						 randomNumber = 0;
                    }
                }

                if (graphicsDevice.beginFrame()) {
                    //graphicsDevice.clear(bgColor, 1.0);
                    /* Rendering code goes here */
                    if (check) {
                        sprite.setTextureRectangle([64, 0, 128, 64]);
                        check = false;
                    } else {
                        sprite.setTextureRectangle([0, 0, 64, 64]);
                        check = true;
                    }
                    draw2D.begin();
//                    for (var i = 0; i < objectList.length; i++) {
//                        var object = objectList[i];
//                        if (object.destinationRectangle[0] == Xmouse && object.destinationRectangle[1] == Ymouse) {
//                            //object.color = [0.0, 1.0, 0.0, 0.0];
//                            mouseSprite.x = Xmouse - tileHeight/2;
//                            mouseSprite.y = Ymouse - tileHeight/2;
//                        }
////                        draw2D.draw(object);
//                        backgroundSprite.x = object.destinationRectangle[0] + 16;
//                        backgroundSprite.y = object.destinationRectangle[1] + 16;
//                        draw2D.drawSprite(backgroundSprite);
//                    }
                    draw2D.end();
//					ctx.beginFrame();
//						ctx.font = '30px Arial';
//						ctx.fillStyle = 'white';
//						ctx.fillText("correct", 10,25);
//					ctx.endFrame();
                    draw2D.begin();
                    draw2D.drawSprite(mouseSprite);
                    draw2D.end();
					WalkPathSprite.setScale(scale);
                    draw2D.begin('alpha');
                    draw2D.drawSprite(WalkPathSprite);
                    draw2D.end();

                    graphicsDevice.endFrame();

                }
            }

            TurbulenzEngine.setInterval(update, 1000 / 60);
        </script>
    </body>

</html>